﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>雪</title>
    <style>

        body{
            background-color: hsla(0,0%,0%,1);
            margin: 0px;
            overflow: hidden;
            font-family: 'Molle', cursive;
        }
        h2{
            left: 50%;
            position: absolute;
            top: 50%;
            transform: translate( -50%, -50%);
            font-size:3em;
            color:hsla(255, 255%, 255%, .1);
        }
    </style>
</head>
<body>
<canvas id='canv'></canvas>
<h2>
    Merry Christmas，<br>
    Delicious dumplings
</h2>

<script src="http://code.jquery.com/jquery-1.7.0.min.js"></script>
<script>
    $(function(){
        var c = document.getElementById('canv'),
                $ = c.getContext("2d");
        var w = c.width = window.innerWidth,
                h = c.height = window.innerHeight;

        Snowy();
        function Snowy() {
            var snow, arr = [];
            var num = 600, tsc = 1, sp = 1;
            var sc = 1.3, t = 0, mv = 20, min = 1;
            for (var i = 0; i < num; ++i) {
                snow = new Flake();
                snow.y = Math.random() * (h + 50);
                snow.x = Math.random() * w;
                snow.t = Math.random() * (Math.PI * 2);
                snow.sz = (100 / (10 + (Math.random() * 100))) * sc;
                snow.sp = (Math.pow(snow.sz * .8, 2) * .15) * sp;
                snow.sp = snow.sp < min ? min : snow.sp;
                arr.push(snow);
            }
            go();
            function go(){
                window.requestAnimationFrame(go);
                $.clearRect(0, 0, w, h);
                $.fillStyle = 'hsla(242, 95%, 3%, 1)';
                $.fillRect(0, 0, w, h);
                $.fill();
                for (var i = 0; i < arr.length; ++i) {
                    f = arr[i];
                    f.t += .05;
                    f.t = f.t >= Math.PI * 2 ? 0 : f.t;
                    f.y += f.sp;
                    f.x += Math.sin(f.t * tsc) * (f.sz * .3);
                    if (f.y > h + 50) f.y = -10 - Math.random() * mv;
                    if (f.x > w + mv) f.x = - mv;
                    if (f.x < - mv) f.x = w + mv;
                    f.draw();}
            }
            function Flake() {
                this.draw = function() {
                    this.g = $.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.sz);
                    this.g.addColorStop(0, 'hsla(255,255%,255%,1)');
                    this.g.addColorStop(1, 'hsla(255,255%,255%,0)');
                    $.moveTo(this.x, this.y);
                    $.fillStyle = this.g;
                    $.beginPath();
                    $.arc(this.x, this.y, this.sz, 0, Math.PI * 2, true);
                    $.fill();}
            }
        }
        window.addEventListener('resize', function(){
            c.width = w = window.innerWidth;
            c.height = h = window.innerHeight;
        }, false);

    })
</script>
</body>
</html>